<template>
     <div> 
     <Title :title="title"></Title>
     <div>
      <div style="height: 150px;" ref = "box1"></div>
     </div>
     </div>
    </template>
    <script setup>
    //1
    import {ref,onMounted} from 'vue';//3生命周期
    
    import { Pie } from '@antv/g2plot';
    import Title from'./Title.vue'
    import{get} from '@/utils/request.js';//4步引用
    //8声明空数组接受后端设备数据
    const empData = ref([]);
    const title = ref('设备状态分布');
    const box1 = ref(null);
    //2声明饼图构造函数
    const loadPie = ()=>{
     //复制粘贴
     const piePlot = new Pie(box1.value, {//此行需要更改
    appendPadding: 10,
    //9步
    data:empData.value,//此行需要更改
    angleField: 'value',
    colorField: 'type',
    radius: 0.9,
    color:['#a0a4eb','#b773df'],
    label: {
     type: 'outer',
     offset: '-30%',
     // content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
     content:'{name}{value}个',
     style: {
     fontSize: 12,
     textAlign: 'center',
     fill:'white'
     },
    },
    //图例
    legend:{
     position:"bottom",
     itemName:{
      style:{
       fill:"white"
      }
     }
    },
    interactions: [{ type: 'element-active' }],
    });
    
    piePlot.render();
    }
    //5,6两步：声明设备在线离线
    const getEmpData = async()=>{
     //get(url,[])
    let response = await get('/dashboard/queryDeviceOnlineNumber')
    console.log(response);
    //8
    empData.value = response.data;
    }
    //3引进生命周期
    onMounted(async()=>{
     //7调用函数
    await getEmpData();
     //输出图，非此步
    loadPie();
    })
    </script>
    
    <style lang="less">
     
    </style>